import React from 'react';
import Header from './Header';
import Footer from './Footer';

/**
 * 导出props声明，同样是{ComponentName}Props形式命名
 */
export interface Demo6Props {
  defaultCount: number; // 可选props, 不需要?修饰
}

/**
 * 组件状态，不需要导出
 */
interface State {
  count: number;
}

/**
 * 类注释
 * 1.继承PurComponent或Component，并声明 Props 和 State 类型
 */
class Demo6 extends React.PureComponent<Demo6Props, State> {
  /**
   * 2.使用 static defaultProps 定义默认 props
   * 对 jsx props 进行推断，可以不需要？修饰
   */
  public static defaultProps = {
    defaultCount: 0,
  };
  /**
   * 初始化state
   */
  public state = {
    count: this.props.defaultCount,
  };

  /**
   * 生命周期方法
   */
  public componentDidMount() {}

  /**
   * 建议靠近componentDidMount, 资源消费和资源释放靠近在一起, 方便review
   */
  public componentWillUnmount() {}

  /**
   * 3.子组件声明
   * 使用静态属性的形式声明子组件
   */
  public static Header = Header;
  public static Footer = Footer;

  public render() {
    return (
      <div>
        <Header content={'头部'} />
        {this.state.count}
        <Footer content={'底部'} />
      </div>
    );
  }
}

export default Demo6;
